<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>墨鱼音乐</title>
    <link rel="stylesheet" href="{{ asset('plugins/aplayer/APlayer.min.css') }}">
    <style>
        .container {
            padding: 3rem 0.5rem;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body class="container">
    <div id="player"></div>
    <div id="download" style="text-align: center;margin-top: 2rem;">
        <a href="{{ urldecode($url) }}">点我保存</a>
    </div>
    <div id="tips" style="text-align: center;margin-top: 2rem;">
        <strong>如需下载，请使用其他浏览器打开</strong>
    </div>
    <div id="url" class="hidden">{{ urldecode($url) }}</div>
    <script src="{{ asset('plugins/aplayer/APlayer.min.js') }}"></script>
    <script>
        const ap = new APlayer({
            container: document.getElementById('player'),
            autoplay: true,
            theme: '#b7daff',
            audio: [{
                name: '{{ $title }}',
                url: document.getElementById('url').innerText,
                cover: '{{ $cover }}',
                artist: '{{ $author }}'
            }]
        })
        function isWeiXin() {
            let ua = window.navigator.userAgent.toLowerCase();
            return !ua.match(/MicroMessenger/i);
        }
        if (isWeiXin()) {
            document.getElementById('download').style.display = 'block';
            document.getElementById('tips').style.display = 'none';
        } else {
            document.getElementById('download').style.display = 'none';
            document.getElementById('tips').style.display = 'block';
        }
    </script>
</body>
</html>
